<template>
	<z-paging ref="pagingRef" v-model="state.addressList" @query="queryList" :auto="false">
		<template v-slot:top>
			<hx-navbar title="收货地址"></hx-navbar>
		</template>
		<view class="address-container">
			<view v-for="(item, index) in state.addressList" :key="index" @click="selectAddRess(item)">
				<view class="address-warp">
					<view class="left">
						<u-avatar bg-color="#ff9900" size="mini" :text="item.recipientName"></u-avatar>
					</view>
					<view class="content">
						<view>
							<u-tag text="默认" size="mini" mode="dark" v-if="item.isDefault === '1'" /><text class="name">{{ item.addresseeName }}</text>
							<text class="telephone"> {{ item.telephone }}</text>
						</view>
						<view class="address">
							{{ item.detailAddress }}
						</view>
					</view>
					<view class="right" @click="toForm(item.id)">
						<u-icon name="edit-pen"></u-icon>
						<view>编辑</view>
					</view>
				</view>
			</view>
		</view>
		<template v-slot:bottom>
			<view class="address-bottom">
				<u-button type="primary" shape="circle" @click="toForm('')">添加新地址</u-button>
			</view>
		</template>
	</z-paging>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue';
import { getPage } from '@/api/user/address';
import { onLoad, onShow } from '@dcloudio/uni-app';

const pagingRef = ref<ZPagingInstance>();

// 用于下单时选择收货地址
const placeChooseFlag = ref(false);

const state = reactive<{ addressList: Array<any> }>({
	addressList: [],
});

onLoad((options) => {
	placeChooseFlag.value = options?.placeChooseFlag;
});
onShow(() => {
	nextTick(() => {
		pagingRef.value?.reload();
	});
});
const queryList: ZPagingEvent.Query = (pageNo: number, pageSize: number) => {
	getPage({
		current: pageNo,
		size: pageSize,
	}).then((response) => {
		pagingRef.value?.complete(response.data.records);
	});
};

const toForm = (id: string) => {
	uni.$hxRouter.push({url:'/pages/user/address/form?id=' + id});
};
const selectAddRess = (row: any) => {
	if (!placeChooseFlag.value) {
		return;
	}
	uni.$emit('update:selectedAddress', row);
	uni.navigateBack();
};
</script>

<style lang="scss">
.address-container {
	padding: 20rpx;
	background: #fefefe;

	.address-warp {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 2rpx;
			width: 100%;
			height: 1px;
			background-color: #f0f0f0;
		}

		.left {
			padding: 20rpx;
		}

		.right {
			display: flex;
			align-items: center;
			flex-direction: column;
			color: #909090;
			font-size: 24rpx;
			padding: 20rpx;
		}

		.content {
			flex: 1;
			font-size: 26rpx;
			.name {
				padding-left: 10rpx;
			}

			.address {
				padding-top: 10rpx;
				color: #909090;
				font-size: 24rpx;
			}

			.telephone {
				color: #909090;
				font-size: 24rpx;
				padding-left: 10rpx;
			}
		}
	}
}
.address-bottom {
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
</style>
